<template>

  <div class="table-data-view menu-table-view" v-loading='tableLoading'>
    <div class="common-screen-view">
      <div class="common-screen-cell">
        <el-input v-model="menuName" :placeholder="$t('tables_title.name')"></el-input>
      </div>
      <div class="common-screen-cell">
        <el-input v-model="level" :placeholder="$t('tables_title.level')"></el-input>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="searchMenu">{{$t('global.search')}}</el-button>
      <el-button type="primary" icon="el-icon-plus" v-if="checkPerm('menu_add')" @click="addMenu">{{$t('global.add')}}</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="expandTable">{{$t('global.expand_all')}}</el-button>
      <!-- <el-button type="primary" icon="el-icon-folder-opened" @click="folderTable">折叠所有</el-button> -->
    </div>
    <table-list ref="tableView" class="table-list-view" :tableConfig="tableConfig" :tableData="tableData" @reviseMenu="reviseMenu" @delMenu="delMenu"></table-list>

    <el-dialog :title="$t('menu_management.edit_menu_info')" :close-on-click-modal="false" :visible.sync="menuInfoVisible" width="600px">
      <add-edit-menu :editMenuInfo="editMenuInfo" @cancelView="cancelView" @refreshData="refreshData"></add-edit-menu>
    </el-dialog>
  </div>
</template>

<script>

import { checkPermission } from '@/common/utils/permission.js'
import { getMenuTreeList,deleteMenu } from '@/api/menuApi.js'
import { getMenuTreeDataByLevel } from '@/common/utils/util.js'

export default {
  data(){
    return{
      menuName:'',
      level:'',
      tableLoading:false,
      menuInfoVisible:false,
      tableConfig:{},       //table的基本配置
      tableData:[],         //table数据源
      treeData:[],
      mapTableData:[],
      pageSize:10,      //每页查询数量
      editMenuInfo:{}
    }
  },
  components:{
    tableList: () => import("@/components/common_tables.vue"),            //引入table组件
    addEditMenu:()=> import('./add_edit_menu.vue')
  },
  created(){
    this.tableConfig = {
      isShowIndex:true,
      props:[
        { type: "text", label: "tables_title.menu_name", prop: "name",width:220},
        { type: "text", label: "tables_title.menu_code", prop: "code"},
        { type: "text", label: "tables_title.parent_num", prop: "pcode"},
        { type: "text", label: "tables_title.req_addr", prop: "url"},
        { type: "text", label: "tables_title.sort", prop: "sort",width:120},
        { type: "text", label: "tables_title.level", prop: "levels",width:120},
        { type: "text", label: "tables_title.menu", prop: "isMenuName",width:120},
        { type: "text", label: "tables_title.status", prop: "statusName",width:120},
      ],
      isOpt:true,
      optBtns:[
        {label:'global.modify',callback:'reviseMenu',code:'menu_edit'},
        {label:'global.delete',callback:'delMenu',code:'menu_remove'}]
    }
    this.getMenuList()
  },
  methods:{
    checkPerm(code){        //校验权限
      return checkPermission(code)
    },
    searchMenu(){
      this.pageNow = 1
      this.getMenuList()
    },
    getMenuList(){
      this.tableLoading = true
      getMenuTreeList({
        menuName:this.menuName,
        level:this.level,
        limit:10000
      }).then((res)=>{
        this.tableLoading = false
        if(res.data.code == 0){
          if(this.level == ''){
            this.mapTableData = res.data.data
            this.tableData = getMenuTreeDataByLevel(res.data.data)
            this.treeData = this.tableData
          }else{
            this.tableData = res.data.data
          }
        }else{
          this.$message.error(res.data.message)
        }
      }).catch((e)=>{
        this.tableLoading = false
      })
    },
    addMenu(){
      this.editMenuInfo = {}
      this.menuInfoVisible = true
    },
    reviseMenu(row){
      this.editMenuInfo = row
      this.menuInfoVisible = true
    },
    delMenu(row){         //删除菜单
      this.$confirm('是否删除菜单"' + row.name + '"?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMenu({menuId:row.menuId}).then((res)=>{
          console.log(res)
          if(res.data.code == 200){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.pageNow = 1
            this.getMenuList()
          }else{
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {

      });
    },
    cancelView(){       //关闭编辑弹窗
      this.menuInfoVisible = false
    },
    refreshData(){      //刷新表格数据
      this.menuInfoVisible = false
      this.page = 1
      this.getMenuList()
    },
    expandTable(){
      let rowIds = this.mapTableData.map((item)=>{
        return item.id + ''
      })
      this.$refs.tableView.expandTable(rowIds);
    },
    folderTable(){          //折叠所有
      this.$refs.tableView.expandTable(['0']);
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
